<!--<template>-->
<!--  &lt;!&ndash;  顶部搜索栏&ndash;&gt;-->
<!--  <div class="header">-->
<!--    <div class="flex">-->
<!--      <div class="flex">-->
<!--        <div class="flex">-->
<!--          <div style="width:70px;text-align: center;margin-left: 15px">调货单号：</div>-->
<!--          <el-select v-model="params.warehouseId" clearable placeholder="请选择" size="small">-->
<!--            <el-option-->
<!--              v-for="item in wareHouseList"-->
<!--              :key="item.warehouseId"-->
<!--              :label="item.warehouseName"-->
<!--              :value="item.warehouseId">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </div>-->
<!--        <div class="flex">-->
<!--          <div style="width:80px;text-align: center;margin-left: 15px">费用类型：</div>-->
<!--          <el-select v-model="params.type" clearable placeholder="请选择" size="small">-->
<!--            <el-option-->
<!--              v-for="item in typeList"-->
<!--              :key="item.value"-->
<!--              :label="item.name"-->
<!--              :value="item.value">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </div>-->
<!--        <div class="flex">-->
<!--          <el-button style="background:#ff6a00;color: whitesmoke;margin-left: 15px" size="small"-->
<!--                     @click="getTransferList">查询-->
<!--          </el-button>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    &lt;!&ndash;    表格&ndash;&gt;-->
<!--    <div class="mainTable">-->
<!--      <el-button style="margin-top: 20px;background:#ff6a00;color: whitesmoke;" @click="addTransferList">新增调货单-->
<!--      </el-button>-->
<!--      <el-table :data="transferData"-->
<!--                height="calc(100vh - 280px)"-->
<!--                element-loading-text="拼命加载中"-->
<!--                element-loading-spinner="el-icon-loading"-->
<!--                v-loading="loading"-->
<!--                border-->
<!--                style="width: 100%; font-size: 12px;"-->
<!--                :headerCellStyle="{-->
<!--              textAlign: 'center',-->
<!--              fontWeight: '400',-->
<!--              background: '#ff6a00',-->
<!--              color: 'white',-->
<!--            }"-->
<!--                :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"-->
<!--      >-->
<!--        <el-table-column type="index" label="序号" width="50px" />-->
<!--        <el-table-column prop="transferId" label="调货单编号" />-->
<!--        <el-table-column prop="orderName" label="订单名称" />-->
<!--        <el-table-column label="调出仓库">-->
<!--          <template slot-scope="scope">{{ scope.row.outWarehouse.warehouseName }}</template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="" label="调出仓库联系人">-->
<!--          <template slot-scope="scope">{{ scope.row.outWarehouse.warehouseContacts }}</template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="" label="调入仓库">-->
<!--          <template slot-scope="scope">{{ scope.row.inWarehouse.warehouseName }}</template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="" label="调入仓库联系人">-->
<!--          <template slot-scope="scope">{{ scope.row.inWarehouse.warehouseContacts }}</template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="" label="是否已完成">-->
<!--          <template slot-scope="scope">-->
<!--            <el-tag v-if="scope.row.inOutType===0" type="primary" plain>未完成</el-tag>-->
<!--            <el-tag v-if="scope.row.inOutType===1" type="warning" plain>已完成</el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="" label="入库凭证">-->
<!--          <template slot-scope="scope">-->
<!--            <el-image v-for='(v, i) in scope.row.procureVouchersList' :key="i" style="width: 50px; height: 50px"-->
<!--                      ref="preview" :src="v" :preview-src-list="scope.row.procureVouchersList">-->

<!--            </el-image>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="" label="到货凭证">-->
<!--          <template slot-scope="scope">-->
<!--            <el-image v-for='(v, i) in scope.row.procureVouchersList' :key="i" style="width: 50px; height: 50px"-->
<!--                      ref="preview" :src="v" :preview-src-list="scope.row.procureVouchersList">-->

<!--            </el-image>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="createdAt" label="创建时间" />-->
<!--        <el-table-column prop="" label="操作 ">-->
<!--          <el-link>上传明细</el-link>-->
<!--          <el-link type="primary" style="margin-left: 10px">入库</el-link>-->
<!--          <el-link type="success">查看凭证</el-link>-->
<!--          <el-link type="warning" style="margin-left: 10px">出库</el-link>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--      &lt;!&ndash;      分页&ndash;&gt;-->
<!--      <el-pagination-->
<!--        style="margin-top: 20px"-->
<!--        align="right"-->
<!--        @size-change="handleFinanceSizeChange"-->
<!--        @current-change="handleFinanceCurrentChange"-->
<!--        :current-page="currentPage"-->
<!--        :page-sizes="[20, 30, 40, 50]"-->
<!--        layout="total, sizes, prev, pager, next, jumper"-->
<!--        :total="count"-->
<!--      >-->
<!--      </el-pagination>-->

<!--      &lt;!&ndash;      新增弹窗&ndash;&gt;-->


<!--      <div class="dialogCard">-->
<!--        <el-dialog-->
<!--          :visible.sync="addTransfer"-->
<!--          :before-close="handleClose"-->
<!--          v-if="addTransfer"-->
<!--          width="50%"-->
<!--          center-->
<!--        >-->
<!--          <div style="background-color: white">-->
<!--            <img src="@/assets/img/header0.png" style="width: 100%" />-->
<!--            <div class="title" style="">新增调货单</div>-->
<!--            <div class="formContent">-->
<!--              <el-card style="margin-top:10px">-->
<!--                &lt;!&ndash;              新增、修改表单&ndash;&gt;-->
<!--                <el-row>-->
<!--                  <el-col :span="24">-->
<!--                    <div class="flexBox">-->
<!--                      <div class="dataInput">订单名称:<span style="color: red;">*</span></div>-->
<!--                      <el-input style="width: 88%" size="small" v-model="addTrans.transferId"-->
<!--                                placeholder="请输入订单名称"></el-input>-->
<!--                    </div>-->
<!--                  </el-col>-->
<!--                  <el-col :span="12">-->
<!--                    <div class="flexBox">-->
<!--                      <div class="dataInput">调入仓库:<span style="color: red;">*</span></div>-->
<!--                      <el-select-->
<!--                        style="width: 76%"-->
<!--                        clearable-->
<!--                        size="small"-->
<!--                        v-model="addTrans.inWarehouseId"-->
<!--                        placeholder="请选择仓库"-->
<!--                      >-->
<!--                        <el-option v-for="item in wareHouseList" :key="item.warehouseId" :label="item.warehouseName"-->
<!--                                   :value="item.warehouseId"></el-option>-->

<!--                      </el-select>-->
<!--                    </div>-->
<!--                  </el-col>-->
<!--                  <el-col :span="12">-->
<!--                    <div class="flexBox">-->
<!--                      <div class="dataInput">调出仓库:<span style="color: red;">*</span></div>-->
<!--                      <el-select-->
<!--                        style="width: 75%"-->
<!--                        clearable-->
<!--                        size="small"-->
<!--                        v-model="addTrans.outWarehouseId"-->
<!--                        placeholder="请选择仓库"-->
<!--                      >-->
<!--                        <el-option v-for="item in wareHouseList" :key="item.warehouseId" :label="item.warehouseName"-->
<!--                                   :value="item.warehouseId"></el-option>-->

<!--                      </el-select>-->
<!--                    </div>-->
<!--                  </el-col>-->
<!--                  <el-col :span="24">-->
<!--                    <div class="flexBox">-->
<!--                      <div class="dataInput">备注:<span style="color: red;">*</span></div>-->
<!--                      <el-input style="width: 88%" type="textarea" size="small" v-model="addTrans.remark"></el-input>-->
<!--                    </div>-->
<!--                  </el-col>-->
<!--                  <el-col :span="24">-->
<!--                    <div class="flexBox" v-for="(count,index) in counts" :key="index">-->
<!--                      <div class="dataInput">材料名称:<span style="color: red;">*</span></div>-->
<!--                      <el-input placeholder="请输入调货数量" size="small" style="width: 88%" v-model="count.materialNo"-->
<!--                                class="input-with-select">-->
<!--                        <el-select-->
<!--                          clearables-->
<!--                          filterable-->
<!--                          slot="prepend"-->
<!--                          size="small"-->
<!--                          style="width: 400px"-->
<!--                          v-model="count.materialName"-->
<!--                          placeholder="请选择材料"-->
<!--                        >-->
<!--                          <el-option v-for="item in materialList" :key="item.classificationId"-->
<!--                                     :label="item.warehouseName"-->
<!--                                     :value="item.name"></el-option>-->

<!--                        </el-select>-->
<!--                        <el-button slot="append" icon="el-icon-delete-solid" @click="removeCount(index)"-->
<!--                                   v-if="count.length>1"></el-button>-->
<!--                      </el-input>-->
<!--                    </div>-->
<!--                  </el-col>-->
<!--                  <el-col :span="12">-->
<!--                    <el-button size="small" style="background:#f5f7fa;color: #909399;margin: 10px 102px-->
<!--" @click="addMaterial">新增材料-->
<!--                    </el-button>-->
<!--                  </el-col>-->
<!--                </el-row>-->
<!--              </el-card>-->
<!--            </div>-->
<!--          </div>-->

<!--          <span slot="footer" class="dialog-footer">-->

<!--        <el-button @click="addTransfer = false">取 消</el-button>-->
<!--        <el-button style="background:#ff6a00;color: whitesmoke" @click="fixedTransferConfirm">确 定</el-button>-->
<!--      </span>-->
<!--        </el-dialog>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import dayjs from "dayjs";-->
<!--import modifyTransfer from "./components/modifyTransfer.vue";-->
<!--import TransferMaterials from "./dialog/TransferMaterials.vue";-->
<!--import tableMixins from "@/mixins/tableMixins.vue";-->
<!--import modifyInOutInventory from "./components/modifyInOutInventory.vue";-->

<!--export default {-->
<!--  name: "TransferList",-->
<!--  meta: { title: "调货单列表", icon: "el-icon-s-marketing", sort: 30, authority: 114 },-->
<!--  data() {-->
<!--    return {-->
<!--      apiName: "materialTransferMaterialTransferList",-->
<!--      params: {},-->
<!--      wareHouseList: [],-->
<!--      transferData: [],-->
<!--      loading: false,-->
<!--      typeList: [],-->
<!--      currentPage: 1,-->
<!--      count: 0,-->
<!--      counts: [{-->
<!--        materialNo:"",-->
<!--        materialName:""-->
<!--      }],-->
<!--      addTransfer: false,-->
<!--      addTrans: [],-->
<!--      materialList: [],-->
<!--    };-->
<!--  },-->
<!--  watch: {},-->
<!--  created() {-->
<!--    this.getTransferList()-->
<!--  },-->
<!--  activated() {-->
<!--  },-->
<!--  methods: {-->
<!--    getTransferList() {-->
<!--      const params = {-->
<!--        pageSize: 20,-->
<!--        pageNumber: 1,-->
<!--      }-->
<!--      this.$api.materialTransferMaterialTransferList(params).then(res => {-->
<!--        this.transferData = res.rows-->
<!--        this.count = res.count-->
<!--      })-->
<!--    },-->
<!--    addTransferList() {-->
<!--      this.addTransfer = true-->
<!--      const params = {-->
<!--        pageSize: 10000,-->
<!--        pageNumber: 1-->
<!--      }-->
<!--      this.$api.warehouseWarehouseList(params).then(res => {-->
<!--        this.wareHouseList = res.rows-->
<!--      })-->
<!--      this.$api.classificationMaterialList(params).then(res => {-->
<!--        this.materialList = res.rows-->
<!--      })-->
<!--    },-->
<!--    handleFinanceSizeChange() {-->

<!--    },-->
<!--    handleFinanceCurrentChange() {-->

<!--    },-->
<!--    handleClose() {-->
<!--      this.addTransfer = false-->
<!--    },-->
<!--    fixedTransferConfirm() {-->

<!--    },-->
<!--    removeCount() {-->
<!--    },-->
<!--    addMaterial() {-->
<!--     this.counts.push({ materialNo: '', materialName: '' });-->
<!--    }-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style lang="less" scoped>-->
<!--.flex {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--}-->

<!--.flexBox {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  margin-top: 30px;-->
<!--  justify-content: end;-->
<!--}-->

<!--.title {-->
<!--  padding: 20px 20px;-->
<!--  margin-top: -10px;-->
<!--  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);-->
<!--  font-size: 18px;-->
<!--  font-weight: 600;-->
<!--}-->

<!--.default /deep/ .el-button&#45;&#45;primary {-->
<!--  border-color: #ff6a00;-->
<!--  background-color: #ff6a00;-->
<!--}-->

<!--.dataInput {-->
<!--  margin-bottom: 10px;-->
<!--  font-weight: 800;-->
<!--  margin-right: 10px;-->
<!--}-->

<!--.default /deep/ .el-button:hover {-->
<!--  color: white;-->
<!--  border-color: #f59a59;-->
<!--  background-color: #f59a59;-->
<!--}-->

<!--.default /deep/ .el-button:active {-->
<!--  color: white;-->
<!--  border-color: #f59a59;-->
<!--  background-color: #f59a59;-->
<!--}-->

<!--.default /deep/ .el-button:focus {-->
<!--  color: #ff6a00;-->
<!--  border-color: #fdf2e9;-->
<!--  background-color: #fdf2e9;-->
<!--}-->

<!--/deep/ .el-input__inner:hover {-->
<!--  border-color: #ff6a00 !important;-->
<!--}-->

<!--/deep/ .el-input__inner:focus {-->
<!--  border-color: #ff6a00 !important;-->
<!--}-->

<!--/deep/ .selected {-->
<!--  color: #ff6a00 !important;-->
<!--}-->

<!--/deep/ .active {-->
<!--  color: #ff6a00 !important;-->
<!--}-->

<!--/deep/ .selected {-->
<!--  color: #ff6a00 !important;-->
<!--}-->

<!--/deep/ .el-loading-text {-->
<!--  color: #ff6a00 !important;-->
<!--}-->

<!--/deep/ .el-icon-loading {-->
<!--  color: #ff6a00 !important;-->
<!--}-->

<!--</style>-->
<template>
  <Table  class='default' filter v-bind="tableOpts" v-on="tableEvent">
    <template #operator>
      <div class="operator-wrap">
        <modifyTransfer ref="dialogRef" @change="fetchCurrentTable" />
        <modifyInOutInventory
          ref="modifyInOutInventory"
          @change="fetchCurrentTable"
        />
        <TransferMaterials
          ref="TransferMaterials"
          @change="fetchCurrentTable"
        />
        <CommonModify
          modifyTitle="入库"
          :modifyForm="modifyForm"
          ref="CommonModify"
          @submit="onModifySubmit"
        />
      </div>
    </template>
  </Table>
</template>

<script>
import dayjs from "dayjs";
import modifyTransfer from "./components/modifyTransfer.vue";
import TransferMaterials from "./dialog/TransferMaterials.vue";
import tableMixins from "@/mixins/tableMixins.vue";
import modifyInOutInventory from "./components/modifyInOutInventory.vue";
export default {
  name: "TransferList",
  mixins: [tableMixins],
  components: { modifyTransfer, modifyInOutInventory, TransferMaterials },
  meta: { title: "调货单列表", icon: "el-icon-s-marketing", sort: 30,authority: 114},
  data() {
    return {
      apiName: "materialTransferMaterialTransferList",
      modifyForm: {
        inVouchers: {
          tag: "Uploader",
          label: "入库凭证",
          value: [],
          props: {},
        },
      },
      form: {
        transferId: {
          tag: "el-input",
          label: "调货单号",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入调货单号",
          },
        },
        outWarehouseId: {
          tag: "el-select",
          label: "仓库",
          value: "",
          items: [],
          props: {
            clearable: true,
            filterable: true,
          },
        },
      },
    };
  },
  watch: {
    "$store.state.warehouseList": function () {
      this.setItems();
    },
  },
  activated() {
    setTimeout(() => {
      this.setItems();
    }, 100);
  },
  methods: {
    setItems() {
      this.form.outWarehouseId.items = this.$store.getters.warehouseListItems;
      this.formKey = this.$quinn.guid();
    },
    onModifySubmit(e) {
      const { modify, row, form, submitDoneMsg } = e;
      if (modify == "transferIn") {
        form.transferId = row.transferId;
        form.inVouchers = form.inVouchers.join(",");
        this.$api["materialTransferMaterialTransferIn"](form).then((e) => {
          submitDoneMsg();
          this.fetchCurrentTable();
        });
      }
    },
    formatData(res) {
      this.total = res?.count || res?.total || 0;
      this.dataSource = (res?.rows || res?.data || res || []).map((e) => {
        if (e.updatedAt)
          e.updatedTime = dayjs(e.updatedAt).format("YYYY-MM-DD HH:mm:ss");
        if (e.createdAt) {
          e.createdTime = dayjs(e.createdAt).format("YYYY-MM-DD HH:mm:ss");
        }
        if (e.arrivalVouchers)
          e.arrivalVouchers = `${e.arrivalVouchers}`.split(",");
        for (const key in e.inWarehouse) {
          if (Object.hasOwnProperty.call(e.inWarehouse, key)) {
            e[`in${key}`] = e.inWarehouse[key];
          }
        }
        for (const key in e.outWarehouse) {
          if (Object.hasOwnProperty.call(e.outWarehouse, key)) {
            e[`out${key}`] = e.inWarehouse[key] = e.outWarehouse[key];
          }
        }
        if (e.inVouchers) e.inVouchers = `${e.inVouchers}`.split(",");
        return e;
      });
    },
    handleAction(opts, row) {
      const { orderName: name, transferId } = row;
      if (["edit", "upload"].includes(opts)) this.showDialog(opts, row);
      else if (opts === "modifyInOutInventory") {
        const ref = this.$refs["modifyInOutInventory"];
        ref &&
        ref.showDialog(opts, {
          ...row,
          targetId: row.transferId,
          type: "transfer",
        });
      } else if (opts == "transferIn") {
        this.setModifyValue(row);
        const ref = this.$refs["CommonModify"];
        ref && ref.showDialog(opts, row);
      } else if (opts === "delete")
        this.showConfirm(`确认删除【${name}】？`, "supplierSupplierDelete", {
          transferId,
        });
      else {
        const ref = this.$refs[opts];
        ref && ref.showDialog(opts, row);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.default /deep/ .el-button--primary {
  border-color: #ff6a00;
  background-color: #ff6a00;
}

.default /deep/ .el-button:hover {
  color: white;
  border-color: #f59a59;
  background-color: #f59a59;
}
.default /deep/ .el-button:active{
  color: white;
  border-color: #f59a59;
  background-color: #f59a59;
}
.default /deep/ .el-button:focus{
  color: #ff6a00;
  border-color: #fdf2e9;
  background-color:#fdf2e9;
}

/deep/ .el-input__inner:hover{
  border-color: #ff6a00 !important;
}
/deep/ .el-input__inner:focus{
  border-color: #ff6a00 !important;
}
/deep/ .selected{
  color:#ff6a00 !important;
}
/deep/ .active{
  color:#ff6a00 !important;
}
/deep/ .selected{
  color:#ff6a00 !important;
}
/deep/ .el-loading-text{
  color:#ff6a00 !important;
}
/deep/ .el-icon-loading{
  color:#ff6a00 !important;
}

</style>
